<template>
  <!-- 确认保养订单 -->
  <view class="container" v-if="result">
    <!-- 门店信息 -->
    <view class="store-info">
      <view class="store-top">
        <text class="title">服务门店<text class="sm">（已匹配附近门店）</text></text>
        <view class="right" @click="onChangeStore">
          <text>另行选择</text>
          <u-icon name="arrow-right" size="24" color="#999"></u-icon>
        </view>
      </view>
      <!-- 店铺位置 -->
      <view class="info">
        <view class="left">
          <view class="title"><text>{{result.store_name}}</text></view>
          <view class="address"><text>{{result.store_address}}</text></view>
        </view>
        <view class="navigation-box" @click="onClickNavigation">
          <text class="iconfont icondaohang"></text>
          <text class="text u-skeleton-rect">{{result.distance}}km</text>
        </view>
      </view>
      <!-- 联系人信息 -->
      <view class="contact">
        <text class="name">{{result.account_name}}</text>
        <view class="input">
          <u-input v-model="result.mobile" type="number" maxlength="11" input-align="right" placeholder="请输入联系电话" :disabled="!isEdit" :focus="isEdit" />
          <text class="edit" @click="isEdit = !isEdit">{{isEdit ? '完成' : '修改'}}</text>
        </view>
      </view>
    </view>
    
    <!-- 商品列表 -->
    <view class="goods-box">
      
      <view class="cart-list">
        <view class="classify-box" v-for="(item, index) in orderinfo.cartList" :key="index">
          <view class="classify-title">
            <view class="flex flex-ai-c flex-jc-sb">
              <text class="span">{{item.maintenance_Type_Name}}</text>
            </view>
            <!-- <view class="tips">
              <text>10000km或6个月</text>
              <text class="red">机油参考用量6L</text>
            </view> -->
          </view>
          <view class="list">
            <view class="cell" v-for="(i, k) in item.maintenanceGoodsLists" :key="k">
              <image class="img" :src="i.pic_URL || errorImg"></image>
              <view class="info">
                <view class="title">
                  <text>{{i.goods_Name}}</text>
                </view>
                <!-- <view class="tags">
                  <text class="text">全合成</text>
                  <text class="text">5W-40</text>
                  <text class="text">SP</text>
                  <text class="text">4L</text>
                </view> -->
                <view class="bottom-box">
                  <view class="left">
                    <text class="price">￥<text class="strong">{{i.isVisualGoods ? '0' : i.sale_Price}}</text></text>
                    <text class="num">x{{i.amount}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 工时费 -->
      <view class="other-cell" v-for="(item, index) in result.serviceProjectslist" :key="index">
        <text class="title">工时费-{{item.service_name}}</text>
        <view class="right">
          <text class="price">￥<text class="strong">{{item.service_price}}</text></text>
          <text class="num">x{{item.service_count}}</text>
        </view>
      </view>
      
      <!-- 优惠券 -->
      <view class="other-cell coupon" @click="onClickCoupon(couponNum, 1)">
        <text class="title">优惠券</text>
        <view class="right">
          <block v-if="couponInfo">
            <text class="coupon-title">{{couponInfo.coupon_Package_Name}}</text>
            <text class="red">-￥{{discountAmount}}</text>
          </block>
          <block v-else>
            <view class="coupon-box" v-if="couponNum > 0"><text>{{couponNum}}张可用</text></view>
            <text v-else class="color-999 mr-20">暂无优惠券</text>
          </block>
          <view v-if="!couponInfo">
            <u-icon name="arrow-right" size="24" color="#999"></u-icon>
          </view>
          <view v-else @click.stop="onClearCoupon('couponInfo')">
            <u-icon name="close" size="24" color="#999"></u-icon>
          </view>
        </view>
      </view>
      <!-- 套餐卡 -->
      <view class="other-cell coupon" @click="onClickCoupon(setMealNum, 2)">
        <text class="title">套餐卡</text>
        <view class="right">
          <view class="coupon-list" v-if="setMealInfo">
            <view class="coupon-item" v-for="(i, k) in setMealInfo.list" :key="k">
              <text class="coupon-title rows">{{k === 0 ? setMealInfo.coupon.coupon_Package_Name : ''}} {{i.name}}</text>
              <text class="red">-￥{{Number(i.discountAmount) < 0 ? -Number(i.discountAmount) : i.discountAmount}}</text>
            </view>
          </view>
          <block v-else>
            <view class="coupon-box" v-if="setMealNum > 0"><text>{{setMealNum}}张可用</text></view>
            <text v-else class="color-999 mr-20">暂无优惠券</text>
          </block>
          <view v-if="!setMealInfo">
            <u-icon name="arrow-right" size="24" color="#999"></u-icon>
          </view>
          <view v-else @click.stop="onClearCoupon('setMealInfo')">
            <u-icon name="close" size="24" color="#999"></u-icon>
          </view>
        </view>
      </view>
      
      <!-- 金额 -->
      <view class="price-box">
        <text class="discount-amount" v-if="discountAmount > 0">已优惠<text class="red">￥{{discountAmount}}</text></text>
        <text class="total-amount">小计<text class="unit">￥</text><text class="bold">{{result.total_money}}</text></text>
      </view>
      
    </view>
    
    <!-- 附加信息 -->
    <view class="additional-info">
      <view class="cell">
        <view class="top">
          <text class="label">运费</text>
          <view class="right">
            <text class="value">￥{{result.freight}}</text>
          </view>
        </view>
      </view>
      <view class="cell" @click="onChangeInvoice">
        <view class="top">
          <text class="label">发票</text>
          <view class="right">
            <text class="value">{{isinvoice ? '开具发票' : '本次无需开发票'}}</text>
            <u-icon name="arrow-right" size="24" color="#999" style="margin-left: 10rpx;"></u-icon>
          </view>
        </view>
        <view class="tips"><text>订单完成后，订单详情可开票（部分除外）</text></view>
      </view>
      <view class="cell">
        <view class="top">
          <text class="label">支付方式</text>
          <view class="right">
            <text class="value">在线支付</text>
          </view>
        </view>
      </view>
      <view class="cell">
        <view class="top">
          <text class="label">备注</text>
        </view>
        <view class="textarea">
          <u-input type="textarea" v-model="reason" height="200" placeholder="请输入备注 例如到店时间等"></u-input>
        </view>
      </view>
    </view>
    
    <!-- 底部 -->
    <view class="footer">
      <view class="content">
        <view class="menu-box">
          <view class="left">
            <text class="total">￥<text class="strong">{{result.total_money - discountAmount | formatAmount}}</text></text>
            <text class="discount-amount" v-if="discountAmount > 0">已优惠￥{{discountAmount}}</text>
          </view>
          <view class="right" @click="onSubmit"><text>提交订单</text></view>
        </view>
      </view>
    </view>
    
    <!-- 发票弹窗 -->
    <u-popup v-model="invoicePopupShow" mode="bottom" borderRadius="30">
      <view class="invoice-box">
        <view class="title">发票</view>
        
        <view class="content">
          <view :class="['row', !isinvoice?'c-active':'']" @click="selectedInvoice(false)">不开发票</view>
          <view :class="['row', isinvoice?'c-active':'']" @click="selectedInvoice(true)">开具发票</view>
        </view>
      </view>
    </u-popup>
    
  </view>
</template>

<script src="./confrimMaintenance.js"></script>

<style lang="scss">
@import './confrimMaintenance.scss'
</style>
